<template>
	<el-table :data="tableData" border style="width: 100%" @cell-click="cellClick"
		:default-sort="{ prop: 'NEWEST_PRICE', order: 'descending' }" :row-style="{ height: '50px' }"
		:cell-style="{ padding: '0px' }">
		<el-table-column type="index" fixed></el-table-column>
		<el-table-column prop="SECURITY_CODE" label="code" sortable fixed width="100"></el-table-column>
		<el-table-column prop="SECURITY_SHORT_NAME" label="名称" sortable fixed width="100">
			<!-- //支持名称标记 -->
			<template #default="scope">
				<div>
					<span style="margin-left: 3px">
						<el-badge :value="scope.row[scope.column.no]" class="item">
							{{ scope.row.SECURITY_SHORT_NAME }}
						</el-badge>
					</span>
				</div>
			</template>

		</el-table-column>
		<el-table-column prop="CIRCULATION_MARKET_VALUE" label="流通市值(元)" sortable
			:sort-method="(a, b) => { return a.CIRCULATION_MARKET_VALUE - b.CIRCULATION_MARKET_VALUE }"></el-table-column>

		<el-table-column prop="NEWEST_PRICE" label="最新价" sortable
			:sort-method="(a, b) => { return a.NEWEST_PRICE - b.NEWEST_PRICE }">
			<!-- // 支持价格标记 -->
			<template #default="scope">
				<div>
					<span style="margin-left: 3px">
						<el-badge :value="scope.row[scope.column.no]" class="item">
							{{ scope.row.NEWEST_PRICE }}
						</el-badge>
					</span>
				</div>
			</template>
		</el-table-column>
		<el-table-column prop="CHG" label="涨跌幅(%)" sortable :sort-method="(a, b) => { return a.CHG - b.CHG }" />
		<el-table-column prop="PCHG" label="涨跌额(元)" sortable></el-table-column>
		<el-table-column prop="PEAK_PRICE" label="最高价(元)" sortable></el-table-column>
		<el-table-column prop="BOTTOM_PRICE" label="最低价(元)" sortable></el-table-column>
		<el-table-column prop="TURNOVER_RATE" label="换手率(%)" sortable
			:sort-method="(a, b) => { return a.TURNOVER_RATE - b.TURNOVER_RATE }"></el-table-column>
		<el-table-column prop="VOLUME" label="成交量(股)" sortable :sort-method="sort"></el-table-column>
		<el-table-column prop="TRADING_VOLUMES" label="成交额(元)" sortable
			:sort-method="(a, b) => { return a.TRADING_VOLUMES - b.TRADING_VOLUMES }"></el-table-column>
		<el-table-column prop="TRADEMARKET" label="上市板块" :filter-method="filterTag"
			:filters="[{ text: '上交所主板', value: '上交所主板' }, { text: '深交所主板', value: '深交所主板' }]"></el-table-column>


	</el-table>
</template>

<script >

export default {
	data() {
		return {
			tableData: [],
		}
	},
	mounted() {
		this.data().then(data => this.tableData = data.data.result.dataList);
	},
	methods: {
		cellClick(row, column, cell, event) {
			console.log("cellClick row", row);
			console.log("cellClick column", column);
			// console.log("cellClick cell", cell);

			// https://element-plus.org/zh-CN/component/message-box.html#%E6%8F%90%E4%BA%A4%E5%86%85%E5%AE%B9
			ElementPlus.ElMessageBox.prompt('请输入标记', 'Tip', {
				center: true,
				confirmButtonText: 'OK',
				cancelButtonText: 'Cancel'
			}).then(({ value }) => {
				row[column.no] = value;

				var maps1 = new Map();

				// 从sessionStorage获取并还原成Map对象
				const storedJsonString = sessionStorage.getItem(row.SECURITY_CODE);
				if (storedJsonString) {
					const parsedData = JSON.parse(storedJsonString);
					// 根据数组元素重新构造Map对象
					maps1 = new Map(parsedData);

					console.log(maps1);
				} else {
					console.log("没有存储的Map数据");
				}
				maps1.set(column.no, value);
				console.log(" axios stringify maps1", maps1);

				sessionStorage.setItem(row.SECURITY_CODE, JSON.stringify(Array.from(maps1)));


			})
		},
		filterTag(value, row) {
			return row.TRADEMARKET === value;
		},
		sort(r1, r2) {
			//https://blog.csdn.net/shids_/article/details/129046419
			console.log(r1.VOLUME.replace("万", ""));
			console.log(parseFloat(r1.VOLUME));

			return parseFloat(r1.VOLUME) - parseFloat(r1.VOLUME);
		},
		data() {

			const options = {
				method: 'POST',
				url: 'https://np-pick.eastmoney.com/api/smart-tag/stock/v3/pw/search-code',
				headers: { 'content-type': 'application/json' },
				data: {
					keyWord: '市盈率介于0-50,55日新高;沪深主板;强势股池,涨跌幅大于3%,五日均线往上,剔除涨停;股价在10-50之间',
					pageSize: 50,
					pageNo: 1,
					fingerprint: '6cb85932fb0ce208d8f3115f9f6f8b82',
					gids: [],
					matchWord: '',
					timestamp: '1704160158763931',
					shareToGuba: true
				}
			};
			axios.interceptors.response.use(function (response) { // 放置业务逻辑代码 //
				console.log(" axios response 拦截器", response);
				var data = response.data.data.result.dataList;
				if (data) {
					data.forEach(d => {
						// console.log(" axios response data", d);
						// 从sessionStorage获取并还原成Map对象
						const storedJsonString = sessionStorage.getItem(d.SECURITY_CODE);
						if (storedJsonString) {
							const parsedData = JSON.parse(storedJsonString);
							// 根据数组元素重新构造Map对象
							const maps1 = new Map(parsedData);
							maps1.forEach((v, k, m) => {
								d[k] = v;
							})

							console.log(d.SECURITY_CODE, "存储的Map数据处理到data中", d);
						} else {
							console.log(d.SECURITY_CODE, "没有存储的Map数据");
						}
					});
				}
				return response;
			});

			return new Promise((resolve, reject) => {
				axios.request(options).then(function (response) {
					console.log(response.data.data.result.dataList);
					return resolve(response.data);
				}).catch(function (error) {
					console.error(error);
				});
			});

		}
	}
}

</script>

<style>
.item {
	position: absolute;
	z-index: 999;
}
</style>